
const persons = [
    { id: 1122 , name: '孙悟空' },
    { id: 2211 , name: '猪悟能' },
    { id: 9977 , name: '沙悟净' }
];

const elements = persons.map( p => <li key={p.id}>{ p.name }</li> );

/*
const elements = [];
persons.forEach( p => {
    let element = <li key={ p.id }>{ p.name }</li> ;
    elements.push( element );
});
*/

/*
// 声明一个存放了 若干 JSX Fragment 的数组
const elements = [ 
    <li>孙悟空</li>,
    <li>猪悟能</li>,
    <li>沙悟净</li>
];
*/

console.log( elements );

function List(){
    return (
        <ul>
            { elements }
        </ul>
    );
}

export default List;